import React, {Component} from 'react';
import '../../../static/scss/fileViewer/component/documentComponent.scss'
import commonConfig from "../../../static/js/commonConfig";
import Iconfont from "../../../utils/iconfont";

class DocumentComponent extends Component {

    getTypeByIcon = (type) => {
        let icon;
        switch (type) {
            case 'pdf':
                icon = 'icon-pdf';
                break;
            case 'doc':
            case 'docx':
                icon = 'icon-word';
                break;
            case 'ppt':
            case 'pptx':
                icon = 'icon-PPT';
                break;
            case 'xls':
            case 'xlsx':
                icon = 'icon-Excel';
                break;
            case 'csv':
                icon = 'icon-CSV';
                break;
            case 'txt':
                icon = 'icon-TXT';
                break;
            case 'json':
                icon = 'icon-json';
                break;
            case 'xml':
                icon = 'icon-XML';
                break;
            default:
                break;
        }
        return icon;
    }

    /*文档点击事件*/
    docHandle = item => {
        commonConfig.filterRedirectType(item);
    }

    render() {
        const {docList} = this.props;
        return (
            <>
                <div className="document_component_module">
                    <ul className="clearFix">
                        {docList.map((item, i) =>
                            <li key={i} className="float-left"
                                onClick={this.docHandle.bind(this, item)}>
                                <div>
                                    <div className={"icon_box " + item.type}>
                                        {commonConfig.options.regex.otherDoc.test(item.type) ?
                                            item.type :
                                            <Iconfont type={this.getTypeByIcon(item.type)}/>}
                                    </div>
                                    <p title={item.name}>{item.name}</p>
                                </div>
                            </li>
                        )}
                    </ul>
                </div>
            </>
        )
    }
}

export default DocumentComponent